<template>
  <div
    class="contextMenu"
    :style="{
      left: contextMenuData.x + 'px',
      top: contextMenuData.y + 'px',
      display: !cmVisible ? 'none' : 'flex',
    }"
  >
    <div @click="editNode" class="optItem">
      <el-icon style="color: #409eff"> <Edit /></el-icon><span>编辑</span>
    </div>
    <div class="optItem" @click="deleteCell">
      <el-icon style="color: #f56c6c"> <Delete /></el-icon><span>删除</span>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  cmVisible: {
    type: Boolean,
    default: false,
  },
  contextMenuData: {
    type: Object,
    default: {
      x: 0,
      y: 0,
      show: false,
      cell: null,
    },
  },
  graph: null,
});
const emits = defineEmits([
  "update:cmVisible",
  "deleteCell",
  "show_editBoxVisible",
]);

const deleteCell = () => {
  emits("deleteCell", "contextMenu");
};
const editNode = () => {
  emits("show_editBoxVisible", props.contextMenuData.cell);
};
</script>

<style lang="scss" scoped>
.contextMenu {
  position: absolute;
  width: 120px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 5px 0px #999;
  transition: all 0.3s;
  user-select: none;
  border-radius: 8px;

  .optItem {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    line-height: 30px;
    width: 100%;
    border-radius: 5px;

    > span {
      margin-left: 8px;
    }

    &:hover {
      background-color: #def2ff;
      color: #5b6775;
    }
  }
}
</style>
